<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/轮播.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="js/PriRotation.js"></script>
</head>
<body>
    <div class="banner">
        <ul class="imgbox">
            <li class="active"><img src="images/01.png" alt=""></li>
            <li><img src="images/02.png" alt=""></li>
            <li><img src="images/03.png" alt=""></li>
            <li><img src="images/04.png" alt=""></li>
            <li><img src="images/05.png" alt=""></li>
        </ul>
        <ol>
            <li class="active"></li>
            <li ></li>
            <li ></li>
            <li ></li>
            <li></li>
        </ol>
        <button id="pre"></button>
        <button id="next"></button>
     
    </div>
    <script>
        // var index = 0;
        // $("#next").click(function(){
        //     index++
        //     if(index>4){
        //         index=0
        //     }
        //     imgToggle(index,1000)
        // })
        // $("#pre").click(function(){
        //     index--
        //     if(index<0){
        //         index=4
        //     }
        //     imgToggle(index,1000)
        // })
        // $(".banner>ol li").click(function(){
        //     var num = $(this).index();
        //     index = num;
        //     imgToggle(num,index)
        // })
        // function imgToggle(index,speed){
        //     $(".banner>ol li").eq(index).addClass('active').siblings().removeClass('active');
        //     $(".imgbox li").eq(index).show().siblings().hide()
        // }
        // function slide(){
        //     time = setInterval(function(){
        //         $("#next").click()
        //     },2000)
        // }
        // slide();


        // var imgs = document.querySelectorAll(".imgbox>li")
        // var lis = document.querySelectorAll(".banner>ol>li")
        // var pre = document.querySelector("#pre")
        // var next = document.querySelector("#next")
        // // 定义下标
        // var index = 0;
        
        // //封装函数，图片变化，小按钮样式变化
        // function imgToggle(index){
        //      // 移除class样式 隐藏图片
        //     for(var i = 0;i<lis.length;i++){
        //         lis[i].classList.remove('active')
        //         imgs[i].style.display = "none"
        //     }
        //     // 为当前点击的li添加class样式 显示图片
        //     lis[index].classList.add('active')
        //     imgs[index].style.display = "block"
        // }
        // // 右键点击下一张
        // next.onclick = function(){
        //     index++;
        //     // 到最后一张 重置
        //     if(index>4){
        //         index = 0;
        //     }
        //     // 调用函数 
        //     imgToggle(index)
        // }
        // // 左键点击上一张
        // pre.onclick = function(){
        //     index--
        //     // 到第一张重置
        //     if(index<0){
        //         index =4;
        //     }
        //     imgToggle(index)
        // }
        // // 小按钮点击 显示对应图片
        // for(var i = 0;i<lis.length;i++)
        // {   
        //     // 获取当前点击的下标
        //     lis[i].index = i;
        //     lis[i].onclick = function(){
        //     var num = this.index;
        //     console.log(num)
        //     imgToggle(num)
        // }
        // }
        // // 定时器调用右键函数实现轮播
        // function slide(){
        //     var time = setInterval(
        //     function(){
        //         next.onclick()
        //     }    
        //     ,2000)
        // }
        // slide()
    </script>
</body>
</html>